<template>
    <view class="tabbar-box">
        <view class="tabbar-item" v-for="(i,k) in tabbar" :key="k" v-if="i.type === 'tab'"
              :class="{'active':i.pageName === currentPage}"
              @click="navTo(k)">
            <image v-if="i.pageName === currentPage" :src="i.selectedIconPath" />
            <image v-else :src="i.iconPath" />
            <view class="text">
                {{i.text}}
            </view>
        </view>
        <view v-else class="tabbar-img">
            <image :src="i.iconPath" />
        </view>
    </view>
</template>

<script>
    export default {
        name: "tabbar",
        props : {
            currentPage : {
                type : String ,
                default : 'index'
            }
        },
        data(){
            return {
                tabbar : [
                    {
                       type: 'tab',
                       pagesName: 'home',
                       pagePath : '/pages/index/index',
                       iconPath : '/static/logo.png',
                       selectedIconPath: '/static/logo.png',
                       text: '首页'
                    },
                    {
                        type: 'img',
                        pagesName: 'index',
                        pagePath : '/pages/index/index',
                        iconPath : '/static/logo.png',
                        selectedIconPath: '/static/logo.png',
                        text: '地图'
                    },
                    {
                        type: 'tab',
                        pagesName: 'index',
                        pagePath : '/pages/index/index',
                        iconPath : '/static/logo.png',
                        selectedIconPath: '/static/logo.png',
                        text: '个人'
                    }
                ]
            }
        },
        methods: {
            navTo(index) {
                let item = this.tabBar[index];
                if (item.pageName !== this.currentPage) {
                    uni.navigateTo ({ url : item.pagePath });
                }
            }
        }
    }
</script>

<style scoped lang="scss">
.tabbar-box {
    display: flex;
    width: 100vw;
    height: 100upx;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 998;
    background-color: #fff;
    justify-content: space-around;
    box-sizing: border-box;
    overflow: hidden;
    .tabbar-item{
        position: relative;
        display: flex;
        flex:1;
        flex-shrink: 0;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .text{
            font-size: 10px;
            line-height: 1.2;
        }
        &.active{
            color: bisque;
        }
        image {
            width: 50rpx;
            height: 50rpx;
        }
    }
    .tabbar-img {
        image {
            width: 50rpx;
            height: 50rpx;
        }
    }
}
</style>